<template>
    <div class="brand_page">
        <h3 class="tom_margin">新增sku</h3>
        <input type="button" class="btn btn-info" @click="add_product()" value="新增商品">
        <div class="row" style="margin-top:50px">
            <div class="col-md-2 good_box" v-for="(item,index) in sku_list">
                <div class="img_box row">
                    <img :src="item.img_url" alt="" style="width:90%;">
                </div>
                <h3>
                    <input type="button" class="btn btn-danger" value="删除" @click="delete_is(item)">
                </h3>
            </div>
        </div>
        <!--新增商品弹窗-->
        <el-dialog title="新增sku" :visible.sync="dialog_show">
            <el-form enctype="multipart/form-data" id="uploadForm">
                <el-form-item label="选择图片" label-width="120px">
                    <input type="file" name="sku_img" id="add_img">
                </el-form-item>
                <el-form-item label="所属商品" label-width="120px">
                    <el-select placeholder="选择商品" v-model="select_option.selet_1">
                        <el-option v-for="(item,index) in menu_option" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog_show = false">取 消</el-button>
                <el-button type="primary" @click="add_new()">确 定</el-button>
            </div>
        </el-dialog>
        <!--新增商品弹窗 end-->
    </div>
</template>
<script>
import g from '../../components/global.js'
export default {
  data() {
    return {
      menu_option: [],
      dialog_show: false,
      select_option: {
        selet_1: '',
        selet_2: '',
        child_menus: [],
        child_select: []
      },
      sku_list: []
    }
  },
  mounted() {
    this.get_sku_func()
    this.get_product_list()
  },
  methods: {

    add_product() {
      this.dialog_show = true
    },
    get_product_list() {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/get_all_product',
        success: function(data) {
          var dataobj = JSON.parse(data).data
          _this.menu_option = dataobj
        }
      })
    },
    get_sku_func() {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api.v1/get_sku',
        success: function(data) {
          var dataobj = JSON.parse(data).data
          _this.sku_list = dataobj
        }
      })
    },
    add_new() {
      var _this = this
      var formData = new FormData($('#uploadForm')[0])
      var selet_1 = _this.select_option.selet_1
      formData.append('product_id', selet_1)
      $.ajax({
        url: g.res_url + '/api/v1/add_sku',
        data: formData,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
          if (data == 'success') {
            _this.$message.success('操作成功')
            _this.get_sku_func()
          } else {
            _this.$message.error('操作失败')
          }
        },
        error: function() {
          _this.$message.error('网络繁忙')
        }
      })
      _this.dialog_show = false
    },
    delete_is(item) {
      var _this = this
      $.ajax({
        type: 'post',
        url: g.res_url + '/api/v1/del_sku',
        data: {
          sku_id: item.id
        },
        success: function(data) {
          if (data == 'success') {
            _this.$message.success('操作成功')
            _this.get_sku_func()
          } else {
            _this.$message.error('操作失败')
          }
        },
        error: function() {
          _this.$message.error('网络繁忙')
        }
      })
    }
  }
}
</script>
<style scoped>
.row_height {
  height: 150px !important;
  margin: 28px 0;
}
.tom_margin {
  margin-bottom: 10px;
  margin-top: 30px;
}
.del_btn {
  margin: 20px 0 80px 20px;
}
.sku_box img {
  margin: 10px 0;
  float: left;
  width: 15%;
}
.tle {
  font-size: 32px;
  color: #007cd5;
}
.good_tle {
  color: #333;
}

.price {
  color: #0080d2;
  font-weight: 600;
  font-size: 18px;
}
.img_box {
  height: 200px;
  overflow: hidden;
}
.full-width {
  display: block;
  width: 100%;
}
.head_tle {
  margin-top: 50px !important;
}
</style>

